/* Scoped moving background - apply by adding `moving-bg` class to on pages that need it */ body.moving-bg { background-color: #040356; background-image: radial-gradient(transparent 0.6em, rgba(27, 27, 27, 0.07) 0.6em), conic-gradient(at 1em 1em, transparent 270deg, rgb(6, 6, 230) 270deg), conic-gradient(at 1em 1em, transparent 270deg, rgba(208, 12, 123, 0.576) 270deg), conic-gradient(at 1em 1em, transparent 270deg, rgb(6, 6, 230) 270deg), conic-gradient(at 1em 1em, transparent 270deg, rgba(208, 12, 123, 0.472) 270deg); background-size: 1em 1em, 4em 4em, 4em 4em, 4em 4em, 4em 4em; background-repeat: repeat; animation: bpx 12s infinite, bpy 12s -3.75s infinite; } @keyframes bpx { 0%, 7.5%, 100% { background-position-x: 0, 0, 1em, 2em, 3em; } 12.5%, 20% { background-position-x: 0, 1em, 0, 3em, 2em; } 25%, 32.5% { background-position-x: 0, -1em, -2em, 5em, 4em; } 37.5%, 45% { background-position-x: 0, 1em, -4em, 7em, 2em; } 50%, 57.5% { background-position-x: 0, -2em, -5em, 8em, 5em; } 62.5%, 70% { background-position-x: 0, -3em, -4em, 7em, 6em; } 75%, 82.5% { background-position-x: 0, -1em, -2em, 5em, 4em; } 87.5%, 95% { background-position-x: 0, -3em, 0, 3em, 6em; } } @keyframes bpy { 0%, 7.5%, 100% { background-position-y: 0, 0, 1em, 2em, 3em; } 12.5%, 20% { background-position-y: 0, 1em, 0, 3em, 2em; } 25%, 32.5% { background-position-y: 0, -1em, -2em, 5em, 4em; } 37.5%, 45% { background-position-y: 0, 1em, -4em, 7em, 2em; } 50%, 57.5% { background-position-y: 0, -2em, -5em, 8em, 5em; } 62.5%, 70% { background-position-y: 0, -3em, -4em, 7em, 6em; } 75%, 82.5% { background-position-y: 0, -1em, -2em, 5em, 4em; } 87.5%, 95% { background-position-y: 0, -3em, 0, 3em, 6em; } }